<template>
  <div class="content-box">
    <nav-title title="工作移交审批" :routerLink="routerLink" />
    <!-- 发起人基本信息 -->
    <!--<div class="regulations-box">
      <div class="title">发起人基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{cWfName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{cWfDeptdescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{cWfJcDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">联系电话</label>
          <span class="value">{{cWfPhone}}</span>
        </p>
      </div>
    </div>-->

    <!-- 基本信息 -->
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value">{{emplid}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{nameDisplay}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{rsFullName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{jobcodeDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">职等</label>
          <span class="value">{{rsJobLevel}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">导师</label>
          <span class="value">{{cName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">入职日期</label>
          <span class="value">{{lastHireDt|dateFormat}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">申请日期</label>
          <span class="value">{{createdttm|dateFormat}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">联系电话</label>
          <span class="value">{{phone}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">业务类型</label>
          <span class="value">{{cWfBstyValue}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">移交类型</label>
          <span class="value">{{cWfToltValue}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">劳动关系</label>
          <span class="value">{{descr}}</span>
        </p>
        <!--<p class="info-cell clearfix">
          <label class="label">移交人</label>
          <span class="value"></span>
        </p>-->
      </div>
      <div class="info-label">附件</div>
      <div class="file-list" v-for="item in fileList">
        <div class="filname">
          <span class="iplodimg">
            <a v-if="(item.fileType == 'jpg') || (item.fileType == 'png') || (item.fileType == 'pdf') || (item.fileType=='txt') || (item.fileType=='jpeg')" href="javascript:;" @click="showItemClick(item)">{{item.originalName}}</a>
            <!-- <a v-else="" href="javascript:;" @click="downloadFile(item.fileUrl)">{{item.originalName}}</a> -->
            <a v-else="" href="javascript:;" @click="openApp(item.fileUrl, item.androidUrl)">{{item.originalName}}</a>
          </span>
        </div>
      </div>
    </div>

    <!-- 流程信息 -->
    <div class="regulations-box">
      <div class="title">流程信息</div>
      <div class="info-cell">
        <label class="label quit-title">离职/调动去向</label>
        <span class="value">{{cWfToltDescr}}</span>
      </div>
      <div class="info-cell">
        <label class="label quit-title">离职/调动日期</label>
        <span class="value">{{terminationDt|dateFormat}}</span>
      </div>
      <div class="info-cell">
        <div class="grey-content">注：工作移交内容较多，请点击附件查看或进入PC端查看</div>
      </div>
    </div>

    <show-annex :option="showItem" v-if="showDetail" :hiddenImg="hiddenImg"></show-annex>

    <div class="regulations-box">
      <div class="title">流程图</div>
      <!-- 流程图 -->
      <v-flow-charts :transNum="cTransactionNbr" :loginOprid="loginOprid"></v-flow-charts>
    </div>

    <div class="regulations-box">
      <!-- 审批意见 -->
      <div class="regulations-box">
        <div class="info-label">审批意见</div>
        <div class="info-label-text">
          <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
          <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
        </div>
      </div>
    </div>

    <div style="height: 50px"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <operation-btn @doOperate="doOperate" :cApprovalSw="cApprovalSw" :cDenySw="cDenySw" :cPushbackAllSw="cPushbackAllSw" :cAddSw="cAddSw"></operation-btn>
    </div>
  </div>
</template>
<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
.content-box {
  .regulations-box {
    .quit-title {
      text-align: left !important;
      margin-left: 20px !important;
      margin-right: 0 !important;
    }
  }
}
.grey-content {
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
  line-height: 1.5;
  color: grey;
}
</style>

<script>
import {
  getHandover,
  getCompensateApprove
} from "../../api/api";
import { json2Form } from "../../util/http";
import { dateFormat } from "vux";
import operationBtn from "./common/operationBtn";
import vFlowCharts from "../formalStaff/common/flowChart";
import { publicUrl } from "../../util/http";

export default {
  components: {
    operationBtn,
    vFlowCharts
  },
  created() {
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.approved = this.$route.query.approved;
    this.loginOprid = this.$route.query.token;
    if (this.$route.query.approved == "0") {
      this.routerLink = "/todoList/todo";
    } else if (this.$route.query.approved == "1") {
      this.routerLink = "/todoList/done";
    } else {
      this.routerLink = "MyApplication";
    }
    this.getHandoverInfo();
  },
  mounted() {},
  data() {
    return {
      publicUrl: publicUrl,
      fileList: [],
      showItem: {},
      showDetail: false,

      //返回需要跳转到哪个页面
      routerLink: "",
      //是否从已审批页面跳转过来
      approved: "0",

      //发起人基本信息
      cWfName: "", //发起人姓名
      cWfDeptdescr: "", //发起人部门
      cWfJcDescr: "", //发起人岗位
      cWfPhone: "", //发起人联系方式

      //基本信息
      emplid: "", //员工id
      nameDisplay: "", //姓名
      deptDescr: "", //部门
      rsFullName: "",
      jobcodeDescr: "", //岗位
      rsJobLevel: "", //职等
      cName: "", //带教人
      lastHireDt: "", //入职日期
      createdttm: "", //申请日期
      phone: "", //联系电话
      cWfBstyValue: "", //业务类型
      cWfToltValue: "", //移交类型
      descr: "", //劳动关系
      cWfToltDescr: "",//离职/调动去向

      terminationDt: "", //离职日期

      //按钮点击的参数
      cWfType: "",
      cTransactionNbr: "",
      cUserId: "",
      cComments: "",

      cApprovalSw: "",
      cDenySw: "",
      cPushbackAllSw: "",
      cAddSw: ""
    };
  },
  methods: {
    showItemClick(item) {
      this.showItem = item;
      this.showDetail = true;
    },
    hiddenImg() {
      this.showDetail = false;
    },
    openApp(url, androidUrl) {
      const u = navigator.userAgent;
      const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isAndroid) {
        webview.openAttachmentWebView(
          `${this.publicUrl}${androidUrl}`,
          this.$store.state.oprId,
          ""
        ); // eslint-disable-line
      } else {
        window.location.href = `myapp:${this.publicUrl}${url}`;
      }
    },

    getHandoverInfo() {
      this.$vux.loading.show();
      let params = {
        cTransactionNbr: this.cTransactionNbr,
        loginOprid: this.loginOprid
      };
      getHandover(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            //发起人信息
            this.cWfName = res.retData.cWfName;
            this.cWfDeptdescr = res.retData.cWfDeptdescr;
            this.cWfJcDescr = res.retData.cWfJcDescr;
            this.cWfPhone = res.retData.cWfPhone;
            //基本信息
            this.emplid = res.retData.emplid;
            this.nameDisplay = res.retData.nameDisplay;
            this.deptDescr = res.retData.deptDescr;
            this.rsFullName = res.retData.rsFullName;
            this.jobcodeDescr = res.retData.jobcodeDescr;
            this.rsJobLevel = res.retData.rsJobLevel;
            this.cName = res.retData.cName;
            this.lastHireDt = res.retData.lastHireDt;
            this.createdttm = res.retData.createdttm;
            this.phone = res.retData.phone;
            this.cWfBstyValue = res.retData.cWfBstyValue;
            this.cWfToltValue = res.retData.cWfToltValue;
            this.descr = res.retData.descr;
            this.cWfToltDescr = res.retData.cWfToltDescr;
            this.terminationDt = res.retData.terminationDt;

            this.cApprovalSw = res.retData.cApprovalSw;
            this.cDenySw = res.retData.cDenySw;
            this.cPushbackAllSw = res.retData.cPushbackAllSw;
            this.cAddSw = res.retData.cAddSw;

            //审批信息
            this.cWfType = res.retData.cWfType;
            this.cTransactionNbr = res.retData.cTransactionNbr;
            this.fileList = res.retData.wfFiles;
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    doOperate(actionType) {
      //addUserids:{"123","123"}(加签员工ID,从加签页面的已选员工获取)
      //同意审批
      let params = {
          cTransactionNbr: this.cTransactionNbr,
          cWfType: this.cWfType,
          cComments: this.cComments,
          actionType: actionType,
          cLink: 'Handover',
      }

      if (actionType == "AddStep") {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: "Visa",
          params: {
            baseParams:params
          }
        });
      } else {
        this.$vux.confirm.show({
          title: "提示",
          content: "您确认要同意？",
          onConfirm: () => {
            getCompensateApprove(json2Form(params))
              .then(res => {
                if (res && res.retCode === "000000") {
                  this.$router.push("/todoList/todo");
                } else {
                  this.$vux.alert.show({
                    title: "提示",
                    content: res.retMsg
                  });
                }
              })
              .catch(res => {
                this.$vux.alert.show({
                  title: "警告",
                  content: "网络异常，请稍后重试"
                });
              });
          }
        });
      }
    }
  }
};
</script>
